<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="./resources/layui/css/layui.css">
    <STYLE>
        #LAY_app_body{
            left:5px;
            top: 5px;
        }
        .hide{
            display: none;
        }
    </STYLE>
</head>
<body>
    <!-- 主体内容 -->
    <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show"><div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body" pad15="">
                            <form class="layui-form-pane" >
                                <div class="layui-form" lay-filter="">
                                    <div class="layui-form-item">
                                        <div class="layui-input-inline hide" >
                                            <input type="text" name="opid" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">当前密码</label>
                                        <div class="layui-input-inline">
                                            <input type="password" name="oldPwd" required lay-verify="required|pass" lay-vertype="tips" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">新密码</label>
                                        <div class="layui-input-inline">
                                            <input type="password" name="pwd" required lay-verify="required|pass" lay-vertype="tips" autocomplete="off" id="LAY_password" class="layui-input">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">确认新密码</label>
                                        <div class="layui-input-inline">
                                            <input type="password" name="repassword" required lay-verify="required|repass|pass" lay-vertype="tips" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="*">确认修改</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <!-- 辅助元素，一般用于移动设备下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
</body>
<script src="./resources/js/jquery.min.js"></script>
<script src="./resources/layui/layui.js" charset="utf-8"></script>
<script src="./resources/js/style.js"></script>
<script src="./resources/js/api.js"></script>
<script>
    $(function () {
        var opid = getCookie("yanzheng").split('|')[2];
        $("[name='opid']").val(opid);
    });
    layui.use('form', function(){
        var form = layui.form;
        //各种基于事件的操作，下面会有进一步介绍
        //自定义验证规则
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ],
            repass : function(value, item){ //value：表单的值、item：表单的DOM对象
                var pwd = $("[name='pwd']").val();
                var repwd =$("[name='repassword']").val();
                if( pwd != repwd ){
                    return '确认密码必须与新密码相同';
                }
            }
        });
        //表单提交监听
        form.on('submit(*)', function(data){
            console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:urls+'/api/user/upPwd.do',
                data:data.field,
                success:function (res) {
                    console.log(res);
                    layer.msg(res.msg);
                },
                error:function (data) {
                    layer.msg('系统错误');
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</html>